<template>
	<div class="sdetail">
		<div class="asked_top">
			<div class="img_overall">
				<div class="top_img">
					<img :src="$store.state.domain+detail.picture" alt="">	
					<div class="top_info">
						<!-- <div>
							<p>自主提出一个问题</p>
							<p>平台大师以最快的速度</p>
							<p>为您解疑答惑 并可继续追问</p>
						</div> -->
					</div>
				</div>
				<div class="info">
					<span>{{detail.useramount}}人已测试</span>
					<span class="ques_num"><em v-for="(tag,i) in tags" :key="i">{{tag}}</em></span>
				</div>
			</div>
      <div class="service_info">
        <p>{{detail.big_desc}}</p>
      </div>
		</div>
		<div class="asked_list">
			<template v-if="catlist.length">
			<free-watch v-for="(item,index) in catlist" :key="index" :item="item" ></free-watch>
			</template>
			<div class="dafault_asked" v-else>
				<p>暂无问答~</p>
			</div>
		</div>	
    <div class="bottom_btn">
      <span @click="goaskQues()">我也想问</span>  
    </div>		
	</div>
    
</template>
<script>
import freeWatch from "@/components/freeWatch";
export default {
	components:{
		freeWatch
	},
  data(){
    return{
			cid:this.$route.query.cid,
			detail:{},
			catlist:[],
			tags:['隐私保护','全面分析','快速回复'],
			
    }
  },
  created(){
		this.getClassDetail();
		this.getFqCatlist();
  },
  methods:{
		getClassDetail(){
 			this.$http.fetchGet("getFqCatDetail", {
        cat_id:this.cid,
      }).then(({ data }) => {
        this.detail = data;
      });
		},
		getFqCatlist(){
			this.$http.fetchGet("getFqCatConsultance",{
				cat_id:this.cid,
				limit:3,
			}).then(({ data }) => {
        this.catlist = data;
      });
		},
    goaskQues(){
      this.$router.push({
				path: '/selectques',
				query: {
					cid: this.cid
				}
			})
    },

  }
  
}
</script>

<style scoped lang="less">
	.sdetail{
    height: 100%;
    overflow: auto;
    position: relative;
		.asked_top{
			padding: .28rem .266667rem .4rem;
			border-bottom: .266667rem solid #F2F2F2;
		}
		.img_overall{
			border:1px solid rgba(241,241,241,1);
			border-radius: .133333rem;
			background: rgba(255, 255, 255 ,1);
			margin-bottom: .44rem;
			.top_img{
				width: 100%;
				position: relative;
				overflow: hidden;
				img{
					width: 100%;
					display: block;
				}
				.top_info{
					position: absolute;
					left: 50%;
					top: .533333rem;
					p{
						font-size: .32rem;
						color: #666;
						line-height: .48rem;
					}
				}
			}
		}

		.info{
			padding: 0 .266667rem;
			height: 1.066667rem;
			line-height: 1.066667rem;
			.flex();
			.justify-content(space-between);
			color: #666;
			font-size: .346667rem;
			.ques_num{
        color: #189BEB;
        em{
          font-style: normal;
          padding-left: .32rem;
        }
      }
		
		}
    .service_info{
      font-size: .32rem;
      line-height: .48rem;
      color: #333;
    }
		.asked_list{
		padding-bottom: 1.706667rem;
		.dafault_asked{
			margin-top: 40px;
			p{
				text-align: center;
				color: #999;
			}
		}

    }
    .bottom_btn{
      position: fixed;
      bottom: 0;
      left: 0;
      padding: .266667rem;
      box-sizing: border-box;
			width: 100%;
			background: #fff;
      span{
        display: block;
        width: 100%;
        height: 1.173333rem;
        text-align: center;
        line-height: 1.173333rem;
        background:rgba(24,155,235,1);
        border-radius:5px;
        color: #fff;
        font-size: .4rem;
      }
    }
	}
</style>

